<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import Table from '@/components/Table.vue'
import modelDetail from '@/views/model/dataModel/modelDetail.vue'
import { list, save, update, del } from '@/api/model/dataModel/dataModel'

const table = reactive({
  loading: false,
  operation: {
    isShow: true,
    width: '120'
  },
  tableTitle: [
    { prop: 'name', label: '名称', align: 'left' },
    { prop: 'code', label: '编号', align: 'left' },
    { prop: 'groupName', label: '分组' },
    { prop: 'sort', label: '排序' },
    { prop: 'createTime', label: '创建时间' },
    { prop: 'remarks', label: '描述' }
  ],
  tableData: []
})

onMounted(() => {
  onDataModelList()
})

function onDataModelList() {
  table.loading = true;
  list({}).then((res: any) => {
    if (res) {
      table.loading = false;
      table.tableData = res.result;
    }
  })
}

const formRef = ref<FormInstance>()
const form = reactive({
  operate: 0,
  dictVisible: false,
  modelForm: {
    id: '',
    name: '',
    code: '',
    groupName: '',
    model: '{}',
    sort: 0,
    remarks: ''
  }
})

function onAdd(val: any) {
  form.modelForm = {
    id: '',
    name: '',
    code: '',
    groupName: '',
    model: '{}',
    sort: 0,
    remarks: ''
  }
  form.operate = 0
  form.dictVisible = true
}

const modelDetailRef = ref(null);

function onEdit(val: any) {
  modelDetailRef.value.initModelData(val.column.row)
}
function onDelete(val: any) {
  ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    del(val.column.row.id).then(res => {
      if (res) {
        ElMessage.success('删除成功!');
        onDataModelList();
      }
    })
  }).catch(e => {
    console.log(e)
  })
}

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      if (form.operate == 0) {
        save(form.modelForm).then(res => {
          if (res) {
            ElMessage.success("添加成功！");
            onDataModelList()
          }
        })
      } else {
        update(form.modelForm).then(res => {
          if (res) {
            ElMessage.success("更新成功！");
            onDataModelList()
          }
        })
      }
      form.operate = 0
      form.dictVisible = false
    }
  })
}

const saveModel = async (data: any) => {
  update({ id: data.id, model: JSON.stringify(data.rootNode) }).then(res => {
    if (res) {
      ElMessage.success("更新成功！");
      onDataModelList()
    }
  })
}


</script>
<template>
  <div class="lc-pages">
    <div class="pages-classify">
      <Table :data="table.tableData" :column="table.tableTitle" :operation="table.operation" :loading="table.loading">
        <template #search>
          <div><el-button @click="onAdd(null)" v-permission="'dict:save'" type="primary">添加</el-button></div>
        </template>
        <template #column="scope">
          <el-button @click="onEdit(scope)" v-permission="'dict:update'" link style="color:var(--edit)">查看</el-button>
          <el-button @click="onDelete(scope)" v-permission="'dict:delete'" link
            style="color:var(--delete)">删除</el-button>
        </template>
      </Table>
      <el-dialog title="模型信息" v-model="form.dictVisible" :show-close="false" width="40%">
        <el-form :model="form.modelForm" ref="formRef" label-width="80px" status-icon>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
                <el-input v-model="form.modelForm.name" placeholder="请输入名称" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编号" prop="code"
                :rules="[{ required: true, message: '请输入编号', trigger: 'blur' }]">
                <el-input v-model="form.modelForm.code" placeholder="请输入编号" style="width: 100%" />
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分组名称" prop="groupName"
                :rules="[{ required: true, message: '请输入分组名称', trigger: 'blur' }]">
                <el-input v-model="form.modelForm.groupName" placeholder="请输入分组名称" style="width: 100%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="form.modelForm.sort" :min="0" :max="999" controls-position="right"
                  style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="描述" prop="remarks">
                <el-input v-model="form.modelForm.remarks" type="textarea" placeholder="请输入描述" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="form.dictVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit(formRef)">提交</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div class="pages-list">
      <modelDetail ref="modelDetailRef" @on-save="saveModel"></modelDetail>

    </div>
  </div>
</template>
<style lang="scss">
.classify-tooltip.is-light {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.lc-pages {
  display: flex;

  .pages-classify {
    min-width: 40rem;
  }

  .pages-list {
    width: 100%;
    overflow: hidden;
  }
}
</style>
